<template>
    <div class="container">
        <div class="content">
            <el-tabs v-model="activeName" tab-position="left">
                <el-tab-pane name="BaseInfo">
                    <span slot="label"><i class="el-icon-date"></i> 基本信息</span>
                    <my-info></my-info>
                </el-tab-pane>

                <el-tab-pane name="MyRole">
                    <span slot="label"><i class="el-icon-date"></i> 我的角色</span>
                    <my-role></my-role>
                </el-tab-pane>

                <el-tab-pane name="MyPermission">
                    <span slot="label"><i class="el-icon-date"></i> 我的权限</span>
                    <my-permission></my-permission>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

</template>


<script>
    import MyInfo from './MyInfo.vue'
    import MyRole from './MyRole.vue'
    import MyPermission from './MyPermission.vue'

    export default {
        name: 'index',
        components: {
            MyInfo,
            MyRole,
            MyPermission
        },
        data() {
            return {
                activeName: 'BaseInfo'
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .content{
        min-height: 600px;
    }
</style>
